<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>DPlayer Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css">
    <link rel="stylesheet" href="demo.css">
    <script src="Danmaku.js"></script>
    <style>
        #player {
            background: rgba(0, 0, 0, .8);
            width: 700px;
            height: 400px;
            position: relative;
            overflow: hidden;
        }

        .playing .dplayer-danmaku .dplayer-danmaku-move {
            -webkit-animation-play-state: running;
            animation-play-state: running;
        }
    </style>
</head>

<body>
    <div id="player" class="playing">
        <div id="danmu" class="dplayer-danmaku">
            <div class="dplayer-danmaku-item"></div>
        </div>
    </div>
</body>
<script>
    var d = new Danmaku({
        container: document.getElementById('danmu'),
        opacity: 0.8,
        callback: () => {
            setTimeout(() => {
                this.template.danmakuLoading.style.display = 'none';

                // autoplay
                if (this.options.autoplay) {
                    this.play();
                }
            }, 0);
        },
        error: (msg) => {
            this.notice(msg);
        },
        height: 24,// : 30,
        // time: () => this.video.currentTime,
        unlimited: false,
        events: {

        },
        tran: (msg) => console.log('tran: ', msg),
    });
    // d.danIndex = 0;
    d.resize();
    d.play();
    d.frame();
    // d.pause();
    // d.seek();

    setInterval(function () {
        [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].forEach((u, i) => d.draw({
            text: 'text123' + new Array(i).join('a'),
            color: 'white',
            type: 'right',
            // case 0:
            //     return 'right';
            // case 1:
            //     return 'top';
            // case 2:
            //     return 'bottom';
            border: `2px solid green`,
        }));
    }, 1000)
</script>

</html>